<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="css/bootstrap-2.3.css" rel="stylesheet">

    <!-- IE9兼容 -->
    <!-- [if llt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif] -->

</head>
<body>

    <!-- container限制宽度，并居中 -->
    <div class="container">

        <a href="#login" data-toggle="modal" class="btn btn-primary">点击登陆</a>

        <div class="modal hide fade" id="login">
            <div class="modal-header">
                <a href="#" class="close" data-dismiss="modal">x</a>
                <h4 class="page-header">对话框</h4>
            </div>

            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="control-group">
                        <label class="control-label">用户名：</label>
                        <div class="controls">
                            <input type="text">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">密码：</label>
                        <div class="controls">
                            <input type="text">
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">登陆</button>
            </div>
        </div>

    </div>

    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap-2.3.js"></script>
</body>
</html>